<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>友情链接</span>
                <el-button type="primary" plain @click="handleAdd">
                    <el-icon>
                        <CirclePlus />
                    </el-icon>添加链接
                </el-button>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="100" />
            <el-table-column prop="title" label="链接标题" />
            <el-table-column prop="url" label="网站地址" />
            <el-table-column prop="link_order" label="排序数字" width="100" />
            <el-table-column prop="usable" label="状态" width="100">
                <template #default="scope">
                    <el-tag class="ml-2" type="success" v-if="scope.row.usable==1">启用</el-tag>
                    <el-tag type="info" v-if="scope.row.usable==-1">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="添加日期" />
            <el-table-column prop="oprate" label="操作">
                <template #default="scope">
                    <el-button type="primary" plain size="small" @click="handleEdit(scope.$index, scope.row)">
                        <el-icon>
                            <EditPen />
                        </el-icon>编辑
                    </el-button>
                    <el-button @click="handleStart(scope.row.id,scope.row.usable)" v-if="scope.row.usable==-1"
                        type="success" plain size="small">
                        启用{{scope.row.usable}}
                    </el-button>
                    <el-button @click="handleStart(scope.row.id,scope.row.usable)" v-if="scope.row.usable==1"
                        type="info" plain size="small">
                        禁用{{scope.row.usable}}
                    </el-button>
                    <el-button type="danger" plain size="small" @click="handleRemove(scope.$index, scope.row.id)">
                        <el-icon>
                            <Delete />
                        </el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- 编辑dialog -->
    <el-dialog v-model="dialogVisibleEdit" title="增加友情链接">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="链接标题" prop="title">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="链接地址" prop="url">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="link_order">
                <el-input v-model="form.link_order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogVisibleAdd" title="编辑友情链接">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
            <el-form-item label="链接标题" prop="title">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="链接地址" prop="url">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="link_order">
                <el-input v-model="form.link_order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddData(formRef)">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import Link from '@/api/link.js';
import { ref, onMounted, reactive } from 'vue';
const tableData = ref([]);

// 加载列表
onMounted(async () => {
    let { status, data } = await Link.list();
    if (status) {
        tableData.value = data;
        console.log(data);
    }
});

// 表单验证规则
const rules = reactive({
    title: [
        { required: true, message: '请填写标题文字！', trigger: 'blur' },// 空值验证
        { min: 1, max: 30, message: '标题长度要求1-30字符之间', trigger: 'blur' },// 有效验证
    ],
    url: [
        { required: true, message: '请填写完整的链接地址！', trigger: 'blur' },// 空值验证
        { pattern: /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/, message: '网址不合法', trigger: 'blur' },
    ],
    link_order: [
        { required: true, message: '请填写显示顺序！', trigger: 'blur' },// 空值验证
    ]
});

// 编辑友情链接
let form = ref();
let dialogVisibleEdit = ref(false);
let dialogVisibleAdd = ref(false);
let handleEdit = (index, data) => {
    console.log(data);
    form.value = { ...data };
    dialogVisibleEdit.value = true;
}

// 获取form组件实例对象
let formRef = ref();
// 保存修改数据
let handleSave = (formEl) => {
    // 表单验证
    formEl.validate(async (valid) => {
        if (valid) {
            // 
            let { status, msg } = await Link.edit(form.value.id, { ...form.value });
            if (status) {
                ElMessage.success(msg);
                dialogVisibleEdit.value = false; Link.list();
                console.log({ form })
            } else {
                ElMessage.error(msg);
            }
        } else {
            // 
        }
    });
}
let handleAdd = () => {

    form.value = { url: '', title: '', link_order: '' };
    dialogVisibleAdd.value = true;
}
let handleAddData = (formEl) => {
    // 表单验证
    formEl.validate(async (valid) => {
        if (valid) {
            // 
            let { status, msg } = await Link.create({ ...form.value });
            if (status) {

                ElMessage.success(msg);
                dialogVisibleAdd.value = false; Link.list();

                console.log({ form })
            } else {
                ElMessage.error(msg);
            }
        } else {
            // 
        }
    });
}


let handleRemove = (index, id,) => {
    ElMessageBox.confirm(
        '确定要删除标签吗？',
        '确认删除',
        {
            type: 'error',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        })
        // 确认
        .then(async () => {
            // 先发送ajax，成功后操作DOM进行删除
            let { status, msg } = await Link.remove(id);
            if (status) {
                // 删除成功
                ElMessage.success(msg);
                // 操作DOM
                tableData.value.splice(index, 1);
            } else {
                ElMessage.error(msg);
            }
            // console.log('确认');
        })
        // 取消
        .catch(() => {
            ElMessage('取消成功！')
        });
}
let handleStart = async (data, usable) => {
    let { status, msg } = await Link.start({ "id": data, "usable": -usable });
    if (status) {
        console.log(' ')
        Link.list();
    } else {
        ElMessage.error(msg);
    }
}
</script>
  
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>